<template>
<div>
  
    <Top/>
 
<div id="Content">

    <div id="Catalog">
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @keyup="keyUpHandle">
  <el-form-item label="用户名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
   <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <!-- <el-input placeholder="请输入密码" v-model="input" show-password></el-input> -->

  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
    <el-button @click="resetForm('ruleForm')">清空</el-button>
  </el-form-item>
</el-form>
<a href="/account/register" th:text="register">Need a user name and password?</a>
    </div>
     <Bottom/>
</div>

 

</div>
     
</template>
<script>
import { mapState,mapMutations } from "vuex";
import Top from '../../common/top'
import Bottom from '../../common/bottom'

  export default {
     created () {
     
        const _this = this
        //这句话将route中的参数传递到category中
         
        axios.get("http://localhost:8081/account/signon").then(function(resp){
              console.log(resp)
              _this.signon = resp.data.data;
              console.log(_this.signon[0].username)
          }) 
            //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    var _beforeUnload_time = 0,
      _gap_time = 0;
    var is_fireFox = navigator.userAgent.indexOf("Firefox") > -1; //是否是火狐浏览器
    window.addEventListener("unload", function() {
      _gap_time = new Date().getTime() - _beforeUnload_time;
      if (_gap_time <= 5) {
        Cookies.set('token', '', {expires: 1})
        fetch(baseURL + 'login_out');
      } else {
        sessionStorage.setItem("store", JSON.stringify(_this.$store.state));
      }
    });
    window.onbeforeunload = function() {
      _beforeUnload_time = new Date().getTime();
    };
     
        
    },
    data() {
      return {
        signon:[
          
        ],
        ruleForm: {
          name: '',
          pass: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    components: {
         Bottom,
        Top
       
    },
    methods: {
      ...mapMutations('user',['updateCount']),
      keyUpHandle(e){

      },
      submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            console.log(_this.ruleForm.name)
            console.log(_this.pass)

            console.log(_this.ruleForm)
            for(var i = 0;i < this.signon.length;i++){
              if(this.signon[i].username == _this.ruleForm.name && this.signon[i].password == _this.ruleForm.pass){
                console.log("SUCCESS")
                // console.log()
                _this.updateCount(_this.ruleForm.name)
                localStorage.setItem("token",JSON.stringify(_this.ruleForm.name))
                window.location.href = "http://localhost:8082/catalog/main"
                
            }else{
              console.log("NOT SUCCESS")
            }
            }
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>